<template>
	<view class="page">
		<view class="fill">
			<image v-if="bigcate==1" src="/static/taobao/p_bg.png" mode="widthFix" class="bg"></image>
			<image v-if="bigcate==2" src="/static/taobao/d_bg.png" mode="widthFix" class="bg"></image>
			<text class="f_tit">搜商品优惠券 • 下单省钱拿返现</text>
			<view class="search">
				<view class="searchInput" @click="$navTo('/pages/taobao/search')">
					<icon type="search" size="14" color="#ff374b"/>
					<text>复制商品链接搜优惠券</text>
				</view>
			</view>
		</view>
		<view id="page_wp">
				<scroll-view class="type" :class="{'fixed':isFixed}" scroll-x="true">
					<view class="t_item"  @click="changebigCate(0)" :class="{'t_active':bigcateActive==0}">推荐</view>
					<view class="t_item" v-for="item in cateList" :class="{'t_active':bigcateActive==item.menuid}" @click="changebigCate(item.menuid)">{{item.title}}</view>
				</scroll-view>
		</view>
		<taobaoList :list="goodsList" :type="bigcate" :isloading="isloading" :isempty="isempty"></taobaoList>
	</view>
</template>

<script>
	import taobaoList from "@/components/taobaoList.vue"
	export default {
		components: {
			taobaoList
		},
		data() {
			return {
				isloading: false,
				isempty: false,
				bigcate: 1,
				cateList: [],
				bigcateActive: 0,
				goodsList: [],
				page: 0,
				title: '',
				isFixed: false,
			};
		},
		onPageScroll() {
			var that = this;
			var barHeight;
			uni.getSystemInfo({
				success:(e)=>{
					barHeight = e.statusBarHeight;
				}
			})
			let query = uni.createSelectorQuery().in(that);
			query.select('#page_wp').boundingClientRect(data => {
				that.isFixed = data.top <= barHeight ? true : false;
			}).exec();
		},
		onLoad(option){
			this.bigcate = option.type;
			this.getCate();
			if(option.type==1){
				this.title = "拼多多购物";
			}else if(option.type==2){
				this.title = "抖音购物"
			}
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		onReachBottom(){
			this.getList();
		},
		methods: {
			changebigCate(id){
				if(this.bigcateActive == id) return;
				this.bigcateActive = id;
				this.page = 0;
				this.goodsList = [];
				this.getList();
			},
			getCate(){
				let php = '';
				if(this.bigcate==1){
					php = "duoduo";
				}else if (this.bigcate==2){
					php = "douyin";
				}
				this.$axios('index/goodscate', 'POST', php).then(res => {
					if(res.data.code==200){
						this.cateList = res.data.data;
						this.getList();
					}
				})
			},
			getList(){
				this.isempty = false;
				this.isloading = true;
				this.page++;
				let php = '';
				if(this.bigcate==1){
					php = "duoduo";
				}else if (this.bigcate==2){
					php = "douyin";
				}
				this.$axios('index/goodsList', 'POST', php,{
					page: this.page,
					cid: this.bigcateActive
				}).then(res => {
					this.isloading = false;
					if(res.data.code==200){
						this.goodsList = [...this.goodsList, ...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background: #f4f4f4;
	}
	.fixed{
		position: fixed;
		top: 0;
		background: #fff;
		width: 100%;
		z-index: 99999999;
	}
	.fill{
		position: relative;
		.f_tit{
		    color: #fff;
		    position: absolute;
		    top: 180rpx;
		    display: block;
		    left: 0;
		    right: 0;
		    margin: auto;
		    text-align: center;
		    font-size: 36rpx;
		}
		.bg{
			width: 100%;
		}
		.search{
			position: absolute;
			width: 100%;
			left: 0;
			top: 240rpx;
			padding: 40rpx 20rpx;
			.searchInput{
				background: #fff;
				border-radius: 8rpx;
				color: #999;
				line-height: 2.8;
				padding-left: 24rpx;
				display: flex;
				align-items: center;
				width: 96%;
				margin: 0 auto;
				text{
					margin-left: 12rpx;
				}
			}
		}
	}
	.big_cate{
		display: flex;
		justify-content: space-evenly;
		border-top-left-radius: 11rpx;
		border-top-right-radius: 11rpx;
		margin-top: -22rpx;
		background: #f4f4f4;
		position: relative;
		.big_cate_item{
			text-align: center;
			color: #333;
			.logo{
				width: 76rpx;
				margin: 20px auto 8rpx;
				position: relative;
				image{
					width: 100%;
				}
				.b_tag{
					position: absolute;
					right: -30rpx;
					top: -10rpx;
					color: #fff;
					font-size: 16rpx;
					border-radius: 10rpx;
					border: 1rpx solid #ff7d7e;
					background: #ff233d;
					padding: 2rpx 4rpx;
					border-bottom-left-radius: 0;
				}
			}
		}
	}
	.type{
		white-space: nowrap;
		padding: 36rpx 0 30rpx;
		color: #646464;
		.t_item{
			display: inline-block;
			padding: 0 20rpx;
			font-size: 30rpx;
		}
		.t_active{
			color: #141414;
			font-weight: bold;
			font-size: 32rpx;
			position: relative;
			z-index: 1;
			&::after{
				content: ' ';
				width: 50rpx;
				height: 10rpx;
				background: linear-gradient($bg-color,#fff);
				display: block;
				position: absolute;
				z-index: 2;
				left: 50%;
				right: 50%;
				margin-left: -25rpx;
				bottom: 0;
			}
		}
	}
</style>
